<template>
	<view class="container">
		<view @click="closeOutside">
		  <wd-drop-menu>
		    <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
		  </wd-drop-menu>
		</view>
		<view class="main">
			<view class="card-swiper">
				<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay"
			  		 circular="true" previous-margin="10%" next-margin="10%">
			  		<swiper-item v-for="(item, index) in info" :key="index">
			  			<view :class="item.colorClass" class="swiper-item">
			  				<image class="image" :src="item.img" mode="aspectFill" />
			  			</view>
			  		</swiper-item>
			  	</swiper>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import { useQueue } from '@/uni_modules/wot-design-uni'
	
	const { closeOutside } = useQueue()
	const value1 = ref<number>(0)
	
	const option1 = ref<Record<string, any>>([
	  { label: '全部日记', value: 0 },
	  { label: '最近几天', value: 1 }
	])
	
	function handleChange1({ value }) {
	  console.log(value)
	}
	const indicatorDots =  false; //是否显示面板指示点
	const autoplay = false; //是否自动切换
	const info = ref([{
			colorClass: 'uni-bg-red',
			img: 'https://img.zcool.cn/community/01hzxc63yqx11b9znjoimm3734.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
			content: '内容 A'
		},
		{
			colorClass: 'uni-bg-green',
			img: 'https://img.zcool.cn/community/01jsy5em8t7jzkbs17kncj3837.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
			content: '内容 B'
		},
		{
			colorClass: 'uni-bg-blue',
			img: 'https://img.zcool.cn/community/01dz1ugf5tuetaf47pyvxj3633.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
			content: '内容 C'
		},
		{
			colorClass: 'uni-bg-green',
			img: 'https://img.zcool.cn/community/01vfjnenucrnxlyi2luwzu3437.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
			content: '内容 D'
		}
	])
</script>

<style lang="scss" scoped>
	.container{
		background-color: #fef3bc;
		height: calc(100vh - var(--window-bottom));
	}  
	.swiper-box {
			/* width: 95%; */
		height: 800rpx;
		margin-top: 200rpx;
	}
	
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		/* app上运行不显示图片，就需要加下面这行，设置高度 */
		height: 800upx;
	}

	.image {
		/* width: 750rpx; */
		width: 100%;
		height: 300rpx;
		border-radius: 15upx;
	}

	/* 默认指示点的样式 */
	.swiper-box .wx-swiper-dot {
		width: 15rpx;
		height: 15rpx;
		background: indianred;
		border-radius: 15rpx;
	}

	/* 选中指示点的样式 */
	.swiper-box .wx-swiper-dot.wx-swiper-dot-active {
		width: 30rpx;
		height: 15rpx;
		background: indianred;
		border-radius: 15rpx;
	}
	
</style>
